<template>
	<view>
		<view class="gl-header">
			<view class="gl-header-left">
				<uni-icons type="undo-filled" size="32" style="color: #4cd964;" @tap="lastSwiper"></uni-icons>
				<view class="">商户信息</view>
			</view>
			<view class="gl-header-right"></view>
		</view>
		<view class="gl-body" style="display: flex;flex-direction: column;gap: 10px;">
			<view class="" style="display: flex;gap: 10px;">
				<uni-section title="基础信息" style="background-color: #f0f0f0;border-radius: 10px;">
					<view style="display: flex;padding: 10px 20px;">
						<view style="padding: 10px;display: flex;flex-direction: column;gap: 10px;">
							<image :src="sConf.cos + curPlace?.place_logos" mode="scaleToFill"
								style="width: 96px; height:96px;"></image>
							<view class="gl-button gl-button-default" style="justify-content: center;">
								<uni-icons type="upload" size="18" color="#fff"></uni-icons>
								<text style="font-size: small;" @tap="EventUpload('logos')">上传Logo</text>
							</view>
						</view>
						<view class="ui-all">
							<view class="ui-list">
								<text>店铺昵称</text>
								<view class="">{{curPlace?.nicename}}</view>
								<view class="readEdit" @click="ReadChangeNicename">
									<uni-icons type="compose" :size="18" color="#007aff"></uni-icons>
								</view>
							</view>
							<view class="ui-list" style="position: relative;">
								<text>经营区域</text>
								<view>
									{{curPlace?.sheng}} {{curPlace?.shi}} {{curPlace?.xian}}
								</view>
								<view class="readEdit" @click="ReadChangeCity">
									<uni-icons type="compose" :size="18" color="#007aff"></uni-icons>
								</view>
							</view>
							<view class="ui-list">
								<text>详细地址</text>
								<view class="">{{curPlace?.address}}</view>
								<view class="readEdit" @click="ReadChangeAddress">
									<uni-icons type="compose" :size="18" color="#007aff"></uni-icons>
								</view>
							</view>
							<view class="ui-list">
								<text>经营状态</text>
								<switch :checked="Boolean(curPlace?.status)" style="transform:scale(0.7)"
									@change="ReadChangeState" />
							</view>
						</view>
					</view>
				</uni-section>
				<uni-section title="企业认证" style="background-color: #f0f0f0;border-radius: 10px;">
					<template v-slot:right>
						<text class="gl-link gl-link-base"></text>
					</template>
					<view style="display: flex;padding: 10px 20px;">
						<view style="padding: 10px;display: flex;flex-direction: column;gap: 10px;">
							<image :src="sConf.cos + curPlace?.place_logos" mode="scaleToFill"
								style="width: 96px; height: 96px;"></image>
						</view>
						<view class="ui-all">
							<view class="ui-list">
								<text>企业名称</text>
								<input type="text" placeholder="请输入企业名称" :value="curPlace?.basename" disabled />
							</view>
							<view class="ui-list">
								<text>统一社会信用代码</text>
								<input type="text" placeholder="请输入企业代码" :value="curPlace?.idcode" disabled />
							</view>
							<view class="ui-list">
								<text>企业法人</text>
								<input type="text" placeholder="请输入企业法人" :value="curPlace?.person" disabled />
							</view>
							<view class="ui-list">
								<text>法人联系方式</text>
								<input type="text" placeholder="请输入联系方式" :value="curPlace?.phone" disabled />
							</view>
						</view>
					</view>
				</uni-section>
				<uni-section title="管理员" style="background-color: #f0f0f0;border-radius: 10px;">
					<template v-slot:right>
						<text class="gl-link gl-link-base" @click="changSuper">编辑</text>
					</template>
					<view style="display: flex;padding: 10px 20px;">
						<view style="padding: 10px;display: flex;flex-direction: column;gap: 10px;">
							<image :src="sConf.cos + curPlace?.place_parent.face" mode="scaleToFill"
								style="width: 64px; height: 64px;border-radius: 50%;"></image>
						</view>
						<view class="ui-all">
							<view class="ui-list">
								<view class="">{{curPlace?.place_parent.nicename}}</view>
							</view>
							<view class="ui-list">
								<view class="">{{curPlace?.place_parent.phone}}</view>
							</view>
							<view class="ui-list">
								<view class="">{{curPlace?.place_parent.phone}}</view>
							</view>
						</view>
					</view>
				</uni-section>
			</view>

			<uni-segmented-control :current="currentControl" :values="['产品','订单','报表','员工','财务','其他']"
				@clickItem="currentControlChange"></uni-segmented-control>

			<view class="">
				<subGoodsListVue v-if="currentControl === 0" ref="subGoodsList" :pid="curPlace?.id"></subGoodsListVue>
				<view v-if="currentControl === 1">
					订单
				</view>
				<view v-if="currentControl === 2">
					报表
				</view>
				<view v-if="currentControl === 3">
					员工
				</view>
			</view>
		</view>


		<!-- 城市选择 -->
		<uni-popup ref="cityChangeView">
			<lee-select-city :defaultSelected="curCity" height="60vh" @submit="popupChangeCity"></lee-select-city>
		</uni-popup>
		<!-- 消息提示 -->
		<uni-popup ref="popupAlert" type="message">
			<uni-popup-message :type="alertData.type" :message="alertData.content" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 模态对话框 -->
		<uni-popup ref="popupModel" type="dialog">
			<uni-popup-dialog mode="base" :title="alertData.title" :type="alertData.type" :content="alertData.content"
				:duration="2000" :showClose="false"></uni-popup-dialog>
		</uni-popup>
		<!-- 选择用户 -->
		<popStaffSelectVue ref="popStaffSelect" desc="指定商户的管理员, 非推荐者." @change="eventSuper"></popStaffSelectVue>
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	import uploadCos from '@/common/uploadCos.js'
	import CityData from '@/components/lee-select-city/city.json'
	import psCos from '@/common/psCos';

	import popStaffSelectVue from '@/components/sub-staff-list/pop-staff-select.vue';
	import subGoodsListVue from '@/components/sub-goods-product/sub-goods-list.vue';
	import psMethod from '@/common/psMethod';
	export default {
		data() {
			return {
				sConf: getApp().globalData,
				curPlace: null,
				currentControl: -1, // 页面分段器索引
				alertData: {
					type: 'success', // success, warn, error, info
					title: '成功',
					content: '成功'
				},
				curCity: null, // 当前城市
			}
		},
		props: {
			// 城市级联数据
			cityData: {
				type: Array,
				default: () => JSON.parse(JSON.stringify(CityData))
			},
		},
		components: {
			popStaffSelectVue,
			subGoodsListVue
		},
		methods: {
			/**
			 * 修改管理员
			 * @param {Object} e
			 */
			eventSuper(e) {
				console.log('eventSuper', e);
				let data = {
					parent: e
				}
				psMethod.syncAuthenticatorRequest(`/admin/placeList/${this.curPlace.id}/`, 'PATCH', this.sConf.auth.token,
					data).then(res => {
					console.log('修改管理员', res);
					this.curPlace = res.resmsg
				}).catch(err => {
					console.log('修改管理员', err);
					uni.showModal({
						title: '失败',
						content: '修改管理员失败',
						showCancel: false
					})
				})
			},
			changSuper() {
				console.log('changSuper');
				this.$refs.popStaffSelect.open()
			},
			/**
			 * 初始化
			 */
			loadDefData(e) {
				console.log('loadDefData');
				this.currentControl = -1
				this.curPlace = e;
				let tmpData = []
				if (e.sheng) {
					tmpData.push(e.sheng)
				}
				if (e.shi && e.shi !== e.sheng) {
					tmpData.push(e.shi)
				}
				if (e.xian) {
					tmpData.push(e.xian)
				}
				this.curCity = tmpData;
			},
			/**
			 * 返回首页
			 */
			lastSwiper() {
				this.$emit('navBack')
			},
			/**
			 * 切换分页
			 */
			currentControlChange(e) {
				console.log('currentControlChange', e);
				this.currentControl = e.currentIndex;
				if (e.currentIndex === 0) {
					this.$nextTick(() => {
						this.$refs.subGoodsList.open(this.curPlace?.id)
					})
				}
			},
			/**
			 * 上传图片
			 */
			EventUpload(e) {
				let that = this;
				psCos.hasTest({
						host: this.sConf.host,
						token: this.sConf.auth.token,
						path: e
					})
					.then(res => {
						console.log('测试', res);
						that.postPlaceLogoUrl(res)
					}).catch(err => {
						console.log('测试_异常', err);
					})
			},
			/**
			 * 修改logo地址
			 */
			postPlaceLogoUrl(e) {
				let host = this.sConf.host + '/admin/placeLogo/';
				let token = this.sConf.auth.token || '';
				let data = {
					pid: this.curPlace.id,
					url: e
				}
				utils.authenticatorPost(host, token, data).then(res => {
					console.log('上传商户logo', res);
					if (res.rescode === 200) {
						console.log('上传商户logo成功');
						this.curPlace.place_logos = e;
						uni.showModal({
							title: '成功',
							content: '上传商户LOGO成功',
							showCancel: false
						})
					} else {
						uni.showModal({
							title: '失败',
							content: '上传商户LOGO失败',
							showCancel: false
						})
					}
				})
			},
			/**
			 * 修改昵称
			 */
			ReadChangeNicename(e) {
				let that = this
				uni.showModal({
					title: '修改商户昵称',
					content: that.curPlace.nicename,
					editable: true,
					placeholderText: '商户昵称',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在提交',
								mask: true
							})

							let host = that.sConf.host + '/admin/placeList/' + that.curPlace.id + '/';
							let token = that.sConf.auth.token
							let data = {
								nicename: res.content
							}
							utils.authenticatorPatch(host, token, data).then(r => {
								if (r.rescode === 200) {
									uni.showToast({
										icon: 'success',
										title: '提交成功'
									})
									that.curPlace.nicename = res.content;
								}
							})

							setTimeout(() => {
								uni.hideLoading()
							}, 2000)
						}
					}
				})
			},
			/**
			 * 修改城市
			 */
			EventChangeCity(e) {
				// {"text": "东城区","value": "东城区"}
				console.log('EventChangeCity', e.detail.value);
				console.log(this.curCity);
			},
			/**
			 * 准备修改城市
			 */
			ReadChangeCity() {
				console.log('ReadChangeCity');
				this.$refs.cityChangeView.open();
			},
			/**
			 * 选择城市
			 */
			popupChangeCity(e) {
				console.log('popupChangeCity', e.simple);
				let that = this;
				uni.showModal({
					title: '修改城市',
					content: '是否要修改城市=> ' + e.simple.join('->'),
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在提交',
								mask: true
							})
							let host = that.sConf.host + '/admin/placeList/' + that.curPlace.id + '/';
							let token = that.sConf.auth.token
							let data = {
								xian: e.simple[e.simple.length - 1],
								shi: e.simple[e.simple.length - 2],
								sheng: e.simple[0]
							}
							utils.authenticatorPatch(host, token, data).then(r => {
								if (r.rescode === 200) {
									uni.showToast({
										icon: 'success',
										title: '提交成功'
									})
									that.curPlace.sheng = data.sheng;
									that.curPlace.shi = data.shi;
									that.curPlace.xian = data.xian;
									that.curCity = e.simple;
								}
							})
							setTimeout(() => {
								uni.hideLoading()
							}, 2000)
						}
					}
				});
				this.$refs.cityChangeView.close();
			},
			/**
			 * 准备修改地址
			 */
			ReadChangeAddress() {
				console.log('ReadChangeAddress');
				let that = this;
				uni.showModal({
					title: '编辑地址',
					content: that.curPlace.address,
					editable: true,
					placeholderText: '详细地址',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在提交',
								mask: true
							})
							let host = that.sConf.host + '/admin/placeList/' + that.curPlace.id + '/';
							let token = that.sConf.auth.token
							let data = {
								address: res.content
							}
							utils.authenticatorPatch(host, token, data).then(r => {
								if (r.rescode === 200) {
									uni.showToast({
										icon: 'success',
										title: '提交成功'
									})
									that.curPlace.address = res.content;
								}
							})
							setTimeout(() => {
								uni.hideLoading()
							}, 2000)
						}
					}
				})
			},
			/**
			 * 修改状态
			 */
			ReadChangeState(e) {
				console.log('ReadChangeState', e.detail.value);
				let that = this;
				uni.showModal({
					title: '店铺状态',
					content: e.detail.value ? '是否要 [开启] 该商户?' : '是否要 [关闭] 该商户?',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在提交',
								mask: true
							})
							let host = that.sConf.host + '/admin/placeList/' + that.curPlace.id + '/';
							let token = that.sConf.auth.token
							let data = {
								status: e.detail.value ? 1 : 0
							}
							utils.authenticatorPatch(host, token, data).then(r => {
								if (r.rescode === 200) {
									uni.showToast({
										icon: 'success',
										title: '提交成功'
									})
									that.curPlace.status = e.detail.value ? 1 : 0;
								}
							})
							setTimeout(() => {
								uni.hideLoading()
							}, 2000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ui-all {
		padding: 10px;
		display: flex;
		flex-direction: column;
		gap: 10px;

		.ui-list {
			display: flex;
			align-items: center;
			gap: 10px;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				border-bottom: solid 1px #f0f0f0;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: #030303;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}

	.cityEdit::after {
		content: '\270e';
		position: absolute;
		right: 0;
		top: 0;
		display: none;
		font-weight: 900;
		color: #007aff;
	}

	.cityEdit:hover::after {
		display: block;
	}

	.readEdit {
		position: relative;
		right: 0;
	}
</style>